<template>
  <view pb-50rpx>
    <view class="mine-detail flex">
      <view class="per flex" @click="navigate('setting')">
        <image class="user-face" :src="userInfo?.face || '/static/default.png'" />
        <view class="user-info" flex flex-col align-items justify-center>
          <view text-36rpx>{{ userInfo?.nickName || '注册/登录' }}</view>
          <view text-24rpx text="#68696B">明星安全员</view>
          <!-- <view v-if="userInfo?.sex != undefined">
            <nut-tag plain>{{ userInfo.sex == 1 ? '男生' : '女生' }}</nut-tag>
          </view> -->
          <!-- <view mt-10rpx text-size-24rpx class="name" v-if="userInfo?.points">
            可用积分:{{ userInfo?.points || 0 }}
          </view> -->
        </view>
      </view>
      <view class="setup" flex flex-col items-end>
        <!-- <view @click="navigate('setting')">
          <nut-icon name="setting" size="28rpx"></nut-icon>
        </view>
        <view ml-20rpx @click="navigate('im')">
          <nut-icon name="message" size="28rpx"></nut-icon>
        </view> -->
        <view
          flex
          items-center
          justify-center
          w-178rpx
          h-40rpx
          text-24rpx
          bg-white
          rounded-20rpx
          @click="$navigateTo('/pages/familyMember/memberList?isSelect=1')">
          切换成员
          <image ml-20rpx w-22rpx h-22rpx src="@/static/mine/change.png"></image>
        </view>
        <view text-24rpx text="#68696B" mt-16rpx>当前成员：{{ currentMemberInfo.nickName || userInfo.nickName }}</view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { isLogin } from '@/utils/filters'
import { onShow } from '@dcloudio/uni-app'
import { navigateToLogin } from '@/utils/filters'
import stroage from '@/utils/storage'
const userInfo = ref<any>({})
const currentMemberInfo = ref<any>({})
const props = defineProps<{
  userInfo?: any
}>()

watch(
  () => props.userInfo,
  () => {
    userInfo.value = props.userInfo
  },
  { deep: true }
)

function navigate(to: string) {
  if (isLogin('auth')) {
    if (to === 'setting') {
      uni.navigateTo({
        url: '/pages/mine/user-detail'
      })
    } else if (to === 'im') {
      uni.navigateTo({
        url: '/pages/im/contactList'
      })
    }
  } else {
    navigateToLogin()
  }
}

onShow(async () => {
  // 判断当前用户是否登录
  if (isLogin('auth')) {
    userInfo.value = isLogin('')
  }
  currentMemberInfo.value = stroage.getCurrentMember()
  console.log('当前成员信息', currentMemberInfo.value)
})
</script>

<style scoped lang="scss">
.mine-detail {
  justify-content: space-between;

  > .per {
    > .user-face {
      border-radius: 50%;
      width: 100rpx;
      height: 100rpx;
      flex-shrink: 0;
    }

    > .user-info {
      font-weight: bold;
      margin-left: 20rpx;
    }
  }
}
</style>
